<template>
  <div class="satellite-control-container">
    <div class="container-wrapper">
      <div class="main-content">
      <div class="control-panel">
        <CommandCategory :categories="categories" :commands="commands" @category-change="onCategoryChange" @search-change="onSearchChange" />
      </div>

      <div class="command-content">
        <div class="command-list-container">
          <div class="command-list-header">
            <h3>单指令发送</h3>
            <button class="command-manage-btn">指令管理</button>
          </div>
          <CommandList :commands="filteredCommands" @send-command="onSendCommand" @delete-command="onDeleteCommand" />
        </div>

        <div class="sent-commands-container">
          <h3>已发送</h3>
          <SentCommandList :commands="sentCommands" @resend-command="onResendCommand" />
        </div>
      </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import CommandCategory from './CommandCategory.vue';
import CommandList from './CommandList.vue';
import SentCommandList from './SentCommandList.vue';

// 定义指令类型
interface Command {
  id: number;
  name: string;
  type: string;
  content: string;
  hasParameter?: boolean;
  parameter?: string;
  sentTime?: string;
}

// 定义分类类型
interface Category {
  id: string;
  name: string;
}

// 状态管理
const searchQuery = ref('');
const selectedCategory = ref('all');
const commands = ref<Command[]>([
  { id: 1, name: '固定指令1', type: 'satellite', content: 'AAAAAAAAAAAA' },
  { id: 2, name: '带参指令2', type: 'satellite', content: 'AAAAAAAAAAAA', hasParameter: true, parameter: '设置频率:' },
  { id: 3, name: '指令3', type: 'payload', content: '指令内容3' },
  { id: 4, name: '指令4', type: 'communication', content: '指令内容4' },
  { id: 5, name: '指令5', type: 'thermal', content: '指令内容5' },
  { id: 6, name: '指令6', type: 'attitude', content: '指令内容6' },
]);
const sentCommands = ref<Command[]>([]);

// 分类数据
const categories = ref<Category[]>([
  { id: 'all', name: '全部指令' },
  { id: 'satellite', name: '卫星指令' },
  { id: 'payload', name: '载荷指令' },
  { id: 'communication', name: '通信指令' },
  { id: 'thermal', name: '热控指令' },
  { id: 'attitude', name: '姿控指令' },
]);

// 计算属性：过滤后的指令
const filteredCommands = computed<Command[]>(() => {
  return commands.value
    .filter(command => selectedCategory.value === 'all' || command.type === selectedCategory.value)
    .filter(command => command.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
             command.content.toLowerCase().includes(searchQuery.value.toLowerCase()));
});

// 方法：处理指令删除
const onDeleteCommand = (commandId: number) => {
  commands.value = commands.value.filter(command => command.id !== commandId);
};

// 方法：处理分类切换
const onCategoryChange = (categoryId: string) => {
  selectedCategory.value = categoryId;
};

// 方法：处理搜索变化
const onSearchChange = (searchText: string) => {
  searchQuery.value = searchText;
};

// 方法：处理指令发送
const onSendCommand = (command: Command) => {
  const sentCommand = { ...command, sentTime: new Date().toLocaleString() };
  sentCommands.value.unshift(sentCommand);
};

// 方法：处理指令重发
const onResendCommand = (command: Command) => {
  const newCommand = { ...command, id: Date.now() };
  onSendCommand(newCommand);
};
</script>

<style scoped>
.satellite-control-container {
  font-family: Arial, sans-serif;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
  width: 100%;
  justify-content: flex-start;
  align-items: stretch;
}

.control-panel {
  width: 250px;
  padding: 15px;
  box-sizing: border-box;
  background-color: #f5f5f5;
  height: 100%;
}

.command-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 15px;
  box-sizing: border-box;
  min-width: 0;
}

.search-box {
  display: flex;
  align-items: center;
  margin-top: 15px;
  width: 100%;
}

.search-box input {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
  width: 100%;
}

.search-btn {
  padding: 8px 12px;
  background-color: #4285f4;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

.command-list-container {
  flex: 2;
  overflow-y: auto;
  margin-bottom: 15px;
}

.sent-commands-container {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 15px;
}

.command-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

h3 {
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.command-manage-btn {
  padding: 6px 12px;
  background-color: #fbbc05;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
  }

  .command-list-container,
  .sent-commands-container {
    flex: none;
    height: 50%;
  }
}

@media (max-width: 480px) {
  .header {
    padding: 10px;
  }

  .search-box input {
    padding: 6px 10px;
  }

  .search-btn,
  .command-manage-btn {
    padding: 6px 12px;
    font-size: 14px;
  }
}
</style>